// import React, { useEffect, useRef } from 'react'
// import { Card } from 'antd'
// import Typing from '@/utils/typing'

// const TypingCard = (props) => {
//     useEffect(() => {
//         const typing = new Typing({
//             source: sourceEl.current,
//             output: outputEl.current,
//         })
//         typing.start()
//     }, [])
//     const { title, source } = props
//     // source 就是父组件传过来的 string
//     const sourceEl = useRef()
//     const outputEl = useRef()
//     return (
//         <Card bordered={false} title={title}>
//             <div ref={sourceEl} dangerouslySetInnerHTML={{ __html: source }}></div>
//             <div ref={outputEl}></div>
//         </Card>
//     )
// }

// export default TypingCard

import React, { useRef, useEffect } from "react";
import { Card } from "antd";
import { PropTypes } from "prop-types";
import Typing from "@/utils/typing";

const TypingCard = (props) => {
  const { title, source } = props;

  const sourceEl = useRef();
  const outputEl = useRef();

  useEffect(() => {
    const typing = new Typing({
      source: sourceEl.current,
      output: outputEl.current,
      delay: 30,
    });
    typing.start();
  }, []);
  return (
    <Card bordered={false} className="card-item" title={title}>
      <div
        style={{ display: "none" }}
        ref={sourceEl}
        dangerouslySetInnerHTML={{ __html: source }}
      />
      <div ref={outputEl} />
    </Card>
  );
};

TypingCard.propTypes = {
  title: PropTypes.string,
  source: PropTypes.string,
};

TypingCard.defaultProps = {
  title: "",
  source: "",
};

export default TypingCard;
